<template>
    <headerr></headerr>
    <div class="tao-row mt-2 mb-5 index">
        <crumbss :items="items"></crumbss>
        <div class="desc-body bg-white ps-4 py-5 pb-5 clearfix">
            <div class="message-left float-start">
                <Image :src="items.imgUrl" height="100%" width="100%" v-if="items.imgUrl">
                    <template #error>
                        <Icon type="ios-image-outline" size="24" color="#ccc" />
                    </template>
                </Image>
            </div>
            <div class="message-body ms-4 float-start" style="width:610px;">
                <h3 class="fs-4 fw-bold mb-5">{{items.itemName}}</h3>
                <p class="mb-4">”{{items.abstractMessage}}“</p>
                <div class="des-steps">
                    <Steps :current="items.state" v-if="items.state">
                        <Step title="项目待定" style="width:25%;"></Step>
                        <Step title="预售/预定" style="width:25%;"></Step>
                        <Step title="售票中" style="width:25%;"></Step>
                        <Step title="演出开始" style="width:25%;"></Step>
                    </Steps>
                </div>
                <div class="mt-5 dm-Radio-Group">
                    <label class="label-title align-top" style="height:32px;line-height:32px;">演出时间：</label>
                    <RadioGroup v-model="selectInfo.timePlan"  type="button">
                        <Radio v-for="(t,index) in timePlan" :label="t.id" :disabled="$Date(t.startTime).isBefore(new Date())">
                            <span>{{t.startTime}}</span>
                        </Radio>
                    </RadioGroup>
                </div>
                <div class="mt-5 dm-Radio-Group">
                    <label class="label-title align-top" style="height:32px;line-height:32px;">选择票价：</label>
                    <RadioGroup v-model="selectInfo.price" type="button">
                        <Radio v-for="p in price" :label="p.price" :disabled="p.isHaveSeat==0"></Radio>
                    </RadioGroup>
                </div>
                <Button type="primary" 
                    style="width: 150px; height: 40px; margin: 20px 0px 0px 65px; font-size: 16px;"
                    @click="ticketChooseSeat" :disabled="selectInfo.itemId==0||selectInfo.price==0||selectInfo.timePlan==0">选座购买</Button>
            </div>
            <div class="message-right float-start" style="width: 262px;">
                <div class="grade-rate">
                    <p class="mb-3">逃票网评分：</p>
                    <span class="rate-size">{{items.avgScore}}</span>
                    <Rate disabled allow-half v-model="items.avgScore" icon="md-star"></Rate>
                    <span class="grade-size align-middle">{{items.commentCount}}</span>
                    <span>人参与评论</span>
                </div>
                <div class="grade-rate">
                    <p class="mb-3">演出时间</p>
                    <span>{{items.startTime}}~{{items.endTime}}</span>
                </div>
                <div class="grade-rate">
                    <p class="mb-3">演出场馆</p>
                    <span>{{items.adress}}</span>
                    <div class="mt-3">
                        <Icon type="ios-pin" style="color:var(--danger-color);font-size: 14px;" />
                        <a target="_blank" :href="'https://ditu.amap.com/search?query='+items.areaName+'&city=130400&geoobj='+items.longitude+'|'+items.latitude+'&zoom=17.5'" class="align-middle">交通路线</a>
                    </div>
                    <!-- <a target="_blank" :href="'https://ditu.amap.com/regeo?spm=a2oeg.project.projectinfo.daddress.53e03608YuRRaD&lng='+items.longitude+'&lat='+items.latitude+'&name='+items.areaName+'&callnative=0&platform=pc'" class="align-middle">交通路线</a>
                     -->
                </div>
                <div class="grade-rate">
                    <p class="mb-3">演出时间</p>
                    <Icon type="logo-usd" style="color:var(--danger-color);font-size: 14px;" />
                    <span>返积分</span>
                </div>
                <div class="grade-rate">
                    <p class="mb-3">实票配送</p>
                    <div>同城满100.00元免运费,不满收10.00元， 发货后1-3天到达</div>
                </div>
            </div>
        </div>
        <div class="desc-footer mt-4 clearfix">
            <div class="footer-left bg-white float-start" style="width: 918px;margin-right: 7px;">
                <div class="demo-tabs-style2">
                    <Tabs type="card">
                        <TabPane label="演出信息">
                            <div v-html="items.basicDescription"></div>
                            <div v-html="items.projectDescription"></div>
                            <div style="visibility: visible;">
                                <div class="mess-box">
                                    <hr>
                                    <div class="title">写剧评</div>
                                    <div class="body ">
                                        <div class="comments-rate"><label for="">打个分吧：</label>
                                            <Rate show-text allow-half v-model="comment.score" icon="md-star">
                                                <span style="color: var(--danger-color)">{{ comment.score }}</span>
                                            </Rate>
                                        </div>
                                        <div class="comments-input">
                                            <Input v-model="comment.comment" type="textarea" :autosize="{minRows:4}" placeholder="写个评价吧10-10000字..."></Input>
                                        </div>
                                        <div class="btns">
                                            <Button type="primary" style="width: 150px; height: 40px;" @click="submitComment"><span>评价</span></Button></div>
                                    </div>
                                </div>
                                <div class="tickets-comments" v-for="c in comments">
                                    <div class="comments-left">
                                        <p><img :src="c.imgUrl" alt=""></p>
                                        <div>{{c.userId}}</div>
                                    </div>
                                    <div class="comments-right">
                                        <p class="com-right-desc">{{c.content}}</p>
                                        <p><Rate allow-half disabled v-model="c.score" icon="md-star"></Rate><span>{{c.createdTime}}</span></p>
                                    </div>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="精彩剧评">
                            <div style="visibility: visible;">
                                <div class="mess-box">
                                    <hr>
                                    <div class="title">写剧评</div>
                                    <div class="body ">
                                        <div class="comments-rate"><label for="">打个分吧：</label>
                                            <Rate show-text allow-half v-model="comment.score" icon="md-star">
                                                <span style="color: var(--danger-color)">{{ comment.score }}</span>
                                            </Rate>
                                        </div>
                                        <div class="comments-input">
                                            <Input v-model="comment.comment" type="textarea" :autosize="{minRows:4}" placeholder="写个评价吧10-10000字..."></Input>
                                        </div>
                                        <div class="btns">
                                            <Button type="primary" style="width: 150px; height: 40px;" @click="submitComment"><span>评价</span></Button></div>
                                    </div>
                                </div>
                                <div class="tickets-comments" v-for="c in commentPage.comments">
                                    <div class="comments-left">
                                        <p><img :src="c.imgUrl" alt=""></p>
                                        <div>{{c.userId}}</div>
                                    </div>
                                    <div class="comments-right">
                                        <p class="com-right-desc">{{c.content}}</p>
                                        <p><Rate allow-half disabled :model-value="c.score/2" icon="md-star"></Rate><span>{{c.createdTime}}</span></p>
                                    </div>
                                </div>
                                <div class="text-center py-4">
                                    <Page v-model="currentPage" :total="commentPage.total" />
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="购买说明">
                            <div style="padding-bottom: 20px; visibility: visible;">
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">特别提示</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <div class="info-title">
                                                售前提示
                                            </div>
                                            <p> 1.为避免快递配送不能及时送达，演出距开场时间少于3天时不提供【快递配送】服务，请谅解！您可以选择电子票或在线支付后上门自取纸质票。
                                                点击查看上门
                                                <a href="">取票地址&gt;&gt;</a>
                                            </p>
                                            <p>
                                                2.凡演出票类商品，开票时间一般为演出前二到四周，正式开票后会第一时间短信通知您，请注意接收。
                                            </p>
                                            <p>
                                                3.如您不是通过“选座购买”通道进行的票品购买，最终票品数量视项目主办方及场馆情况而定，正式开票后逃票网将根据用户付款先后顺序依次配票，可能存在票品不足不能为您配票的风险，如最终未能配票，逃票网承诺全额退款，但不承担其他损失。
                                            </p>
                                        </div>
                                        <div class="info-row">
                                            <div class="info-title">
                                                支付方式
                                            </div>
                                            <p>
                                                网上银行（招商银行等） 支付平台（支付宝等） 转账汇款(招商银行等)
                                                <a href="">查看详情&gt;&gt;</a>
                                            </p>
                                        </div>
                                        <div class="info-row">
                                            <div class="info-title">
                                                退/换货说明
                                            </div>
                                            <p>
                                                针对不可抗力和非不可抗力的退/换票情况和处理，请点击查阅
                                                <a href="">逃票网退换货说明&gt;&gt;</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">无线端购票</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 1. 使用智能设备用户在各应用商店中搜索"逃票"下载安装客户端，购票体验更流畅 </p>
                                            <p> 2. 非智能设备用户可浏览器访问m.dami.cn进行演出查询，随时购票</p>
                                            <p class="info-img"><img
                                                    src=""
                                                    alt=""> <img
                                                    src=""
                                                    alt=""> <img
                                                    src=""
                                                    alt=""></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">网上订购</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 1. 使用智能设备用户在各应用商店中搜索"逃票"下载安装客户端，购票体验更流畅
                                            </p>
                                            <p>
                                                2. 非智能设备用户可浏览器访问 www.dami.cn进行演出查询，随时购票
                                            </p>
                                            <p class="info-img"><img src="/static/img/icons-steps.53ba2c4.png" alt="">
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">在线支付</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 支持多家网上银行、支付平台（支付宝、快钱、银联、微信支付等）在线支付，查看详情&gt;&gt;
                                            </p>
                                            <p style="font-size: 18px; margin-top: 5px;">支付平台：</p>
                                            <p class="info-img"><img
                                                    src=""
                                                    alt=""> <img
                                                    src=""
                                                    alt=""></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">电话订购</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 全国统一服务热线：1001001010</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">上门订购</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p>逃票网北京总部 </p> <br>
                                            <p>办公地址：北京市东城区东中街32号楼7层（东环广场街心花园对面） 点击查看如何到达 </p> <br>
                                            <p>营业时间：星期一至星期日9:00-18:00</p> <br>
                                            <p>支付说明：可用POS机刷卡、现金、预存；支票支付（需要支付等同现金，支票入账后返还）；上门购票也可使用：福利卡（福卡）收取3%手续费。特殊项目除外，具体以上门购票为准！
                                                点击查看周边提款</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">柜台付款</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 您也可以选择就近的公司网点，到柜台直接付款购买，查看分公司上门地址&gt;&gt;</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">电子钱包</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 电子钱包是由逃票网自主研发的第三方支付平台，为每一个用户在购票过程中提供"简单、安全、快速"的在线支付解决方案； 查看详情&gt;&gt;
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="付款方式">
                            <div style="padding-bottom: 20px; visibility: visible;">
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">在线支付</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 支持多家网上银行、支付平台（支付宝、快钱、银联、微信支付等）在线支付，查看详情&gt;&gt;
                                            </p>
                                            <p style="font-size: 18px; margin-top: 5px;">支付平台：</p>
                                            <p class="info-img"><img
                                                    src=""
                                                    alt=""> <img
                                                    src=""
                                                    alt=""></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">柜台付款</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 您也可以选择就近的公司网点，到柜台直接付款购买，查看分公司上门地址&gt;&gt;</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mess-box by-info">
                                    <hr>
                                    <div class="title">电子钱包</div>
                                    <div class="body ">
                                        <div class="info-row">
                                            <p> 电子钱包是由逃票网自主研发的第三方支付平台，为每一个用户在购票过程中提供"简单、安全、快速"的在线支付解决方案； 查看详情&gt;&gt;
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
            <div class="footer-right  float-start" style="width: 275px;">
                <div class="hot-recommend bg-white p-2 pb-5">
                    <h4 class="border-bottom">热门推荐</h4>
                    <ul>
                        <li v-for="r in recommend1" class="mt-4 pb-2 border-bottom" @click="to(r.id)">
                            <a href="#" v-if="hotRecommendShow.id==r.id">
                                <img :src="r.imgUrl" alt="" style="width:265px;">
                                <span>{{r.itemName}}</span>
                            </a>
                            <div v-else @mouseover="hotRecommendShow.id=r.id">
                                <p>{{r.itemName}}</p>
                                <p class="mt-2">{{r.startDate}}~{{r.endDate}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="hot-recommend bg-white p-2 mt-4 pb-5">
                    <h4 class="border-bottom">浏览历史</h4>
                    <ul>
                        <li v-for="r in recommend2" class="mt-4 pb-2 border-bottom">
                            <div>
                                <p>{{r.itemName}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <footerr></footerr>
</template>
<script setup>
import headerr from "../../components/header/index.vue"
import footerr from "../../components/footer/index.vue"
import crumbss from "../../components/crumbs/crumbs.vue"
import { reactive,ref,watchEffect,watch} from "vue"
import {useRoute,useRouter} from "vue-router"
import {Message} from "view-ui-plus"
import dayjs from "dayjs"
import {getComments,getItems,getTimePlan,getPrice,getRecommend,commitItemComment} from "../../utils/api"

let router = useRouter();
let route = useRoute();

function to(itemId){
    location.href="/ticketDesc?itemId="+itemId;
}

let id = parseInt(route.query.itemId);
/**
 * 选中信息
 */
let selectInfo = reactive({
    itemId:id,
    timePlan:0,
    price:0
})


/**
 * 商品信息
 */
let items = ref({});
getItems(id).then(({data})=>{
    items.value=data.data;
})

/**
 * 演出时间
 */
let timePlan = reactive([]);
getTimePlan(id).then(({data})=>{
    timePlan.push(...data.data);
    var flag=false;
    for(let e in timePlan){
        if(dayjs(timePlan[e].startTime).isAfter(new Date)){
            selectInfo.timePlan=timePlan[e].id;
            flag = true;
            break;
        }
    }
    if(!flag){
        Message.error("暂时没有排期，去看看别的吧");
    }
})

/**
 * 门票价格
 */
let price = reactive([]);

watchEffect(()=>{
    getPrice(selectInfo.timePlan).then(({data})=>{
        price.length=0;
        selectInfo.price=0;
        price.push(...data.data);
    })
})

/**
 * 评论分页参数
 */
let currentPage = ref(1);
let commentPage = reactive(
    {
        id:id,
        currentPage:1,
        total:null,
        comments:[]
    }
);

watch(currentPage,()=>{
    pageInit();
})
pageInit();
function pageInit(){
    commentPage.currentPage = currentPage;
    getComments(commentPage).then(({data})=>{
        commentPage.comments.length=0;
        commentPage.comments.push(...data.data.itemComments);
        commentPage.total=data.data.total;
        commentPage.currentPage=data.data.currentPage;
    })
}

/**
 * 添加平评论参数评论
 */
 let comment = reactive({
    comment: "",
    itemId: id,
    score: 0,
    userId: ""
})

/**
 * 添加评论
 */
function submitComment(){
    comment.score = comment.score*2;
    commitItemComment(comment).then(({data})=>{
        if(data.errorCode=='0000'){
            comment.comment="";
            comment.score=0;
            Message.success("评价成功！");
            currentPage=1;
            pageInit();
        }else if(data.errorCode=="0001"){
            router.push("/login");
        }else{
            Message.success("系统拥堵，请稍后评价");
        }
    })
}

/**
 * 热门推荐大图显示
 */
let hotRecommendShow=reactive({
    id:0
})

/**
 * 热门推荐
 */
let recommend1 = reactive([]);
getRecommend(items.itemType1Id).then(({data})=>{
    recommend1.push(...data.data);
    hotRecommendShow.id=recommend1[0].id;
})

/**
 * 热门推荐
 */
let recommend2 = reactive([]);
getRecommend(items.itemType1Id).then(({data})=>{
    recommend2.push(...data.data);
})

/**
 * 购票选座
 */
function ticketChooseSeat(){
    router.push({path:"/ticketChooseSeat",query:selectInfo});
}


</script>
<style>
.index .ivu-rate span{
    font-size: inherit!important;
}
.desc-body .message-body .des-steps {
    height: 85px;
    background-color: #f7f7f7;
    padding: 30px 0 30px 30px;
    width: 600px;
}

.desc-body .message-body .des-steps .ivu-steps-title,
.desc-body .message-body .des-steps .ivu-steps-head {
    background-color: #f7f7f7;
}

.desc-body .message-body .dm-Radio-Group .ivu-radio-group,
.desc-container .desc-body .message-body .dm-Radio-Group .ivu-radio-group-button {
    width: 86%;
}

.desc-body .message-body .dm-Radio-Group .ivu-radio-group-item {
    margin: 0 5px 5px 5px;
    border-left: 1px solid #dddee1;
    border-radius: 4px;
    font-size: 12px;
}

.desc-body .message-body .dm-Radio-Group .ivu-radio-wrapper-checked:first-child {
    border-color: #ff3c1b;
}
.desc-body .message-body .dm-Radio-Group span{
    font-size: 12px;
}

.desc-body .message-right .grade-rate span {
    font-size: 12px;
}

.desc-body .message-right .grade-rate i {
    font-size: 20px;
}

.desc-body .message-right .grade-rate .rate-size {
    color: #ff3c1b;
    font-size: 18px;
    margin-right: 8px;
}

.desc-body .message-right .grade-rate .grade-size {
    color: #ff3c1b;
}

.desc-body .grade-rate {
    border-bottom: 1px dashed #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.message-left{
    height: 371px;
    width: 271px;
}

/* 自定义标签页样式 */
.demo-tabs-style2>.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar {
    border: none;
}

.demo-tabs-style2>.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
    border-radius: 0;
    background: #fff;
    font-size: 14px;
    border: none;

}

.demo-tabs-style2>.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
    border: none;
}

.demo-tabs-style2>.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--danger-color);
    position: absolute;
    top: 0;
    left: 0;
}

/* 基本描述样式 */
.mess-box {
    margin-left: 15px;
    padding-top: 10px;
}

.mess-box hr {
    border: none;
    border-top: 1px dotted #000;
    margin-top: 20px;
    z-index: 10;
    position: relative;
}

.mess-box .title {
    border-left: 2px solid #ff3c1b;
    padding-left: 10px;
    margin-top: -12px;
    width: 110px;
    font-size: 18px;
    background-color: #ffffff;
    z-index: 20;
    position: relative;
}

.mess-box .body {
    margin-top: 20px;
    margin-left: 103px;
    width: 740px;
}

.mess-box .body .comments-rate .com-rate-text {
    vertical-align: middle;
    color: #ff3c1b;
    font-size: 18px;
}

.mess-box .body .btns {
    padding: 20px;
}

.mess-box table {
    margin-bottom: 20px;
}

.mess-box table .row:first-child {
    border-top: 1px solid #ccc;
}

.mess-box table .row {
    border: 1px solid #ccc;
    border-left: 0px;
    border-top: 0px;
    background-color: #eeeeee;
    height: auto;
}

.mess-box table .row .column {
    height: auto;
    border-left: 1px solid #ccc;
    padding: 15px 0 15px 30px;
    width: 110px;
}

.mess-box table .row .column:nth-child(even) {
    width: 259px;
    background-color: #ffffff;
}

.mess-box .project-desc .pro-title {
    height: 40px;
    background-color: #eeeeee;
    padding: 10px 0 0 10px;
    margin-bottom: 25px;
    margin-top: 25px;
    font-size: 16px;
}

.mess-box .project-desc p {
    line-height: 24px;
    font-size: 12px;
}

.mess-box .project-desc .p-img {
    text-align: center;
}
.mess-box .ivu-rate i{
    font-size: 20px;
}

.by-info .body {
    margin-left: 5px;
}

.by-info .body .info-row .info-title {
    margin: 10px 0;
    font-size: 14px;
    color: #ff3c1b;
}

.by-info .body .info-row p {
    line-height: 24px;
    font-size: 12px;
}

.by-info .body .info-row p a {
    color: #ff3c1b;
}

.by-info .body .info-row .info-img {
    padding-top: 20px;
}

.tickets-comments {
    margin-left: 15px;
    margin-bottom: 37px;
}

.tickets-comments .comments-left,
.tickets-comments .comments-right {
    display: inline-block;
}

.tickets-comments .comments-left {
    text-align: center;
    margin-right: 10px;
}

.tickets-comments .comments-left img {
    width: 44px;
    height: 44px;
}

.tickets-comments .comments-right {
    vertical-align: top;
    margin-left: 40px;
    width: 740px;
    height: 87px;
    background-color: #f0f0f0;
    padding: 21px 0 15px 29px;
}

.tickets-comments .comments-right .com-right-desc {
    font-size: 14px;
    margin-bottom: 10px;
}
.tickets-comments .comments-right span{
    font-size: 12px;
}
.tickets-comments .comments-right .ivu-rate span{
    font-size: 12px;
}
.tickets-comments .ivu-rate i{
    font-size: 20px;
}
</style>